<template>
	<view class="app">

		<view style="display: flex; flex-direction: column;">

			<camera v-if="showCamera" class="camera" device-position="back" resolution="medium" flash="auto"
				@initdone="initdone" @error="error">
			</camera>
			<image v-if="!showCamera" @click="chooseImg" class="review" mode="scaleToFills" :src="src">
			</image>
			<view style="display: flex;flex-direction: row; margin-bottom: 5px;">
				<button size="mini" style="width: 40%; " type="primary" @click="takePhoto">拍照</button>
				<button size="mini" style="width: 40%; " type="primary" @click="takePhoto1">重拍</button>
				<button size="mini" v-if="src != null" style="width: 40%; " type="primary" @click="uploadImage">识别</button>
			</view>
		</view>
		
		<view style="margin-bottom: 1%; width: 100%;">
			<uni-section title="图中文字" type="line">
				<textarea class="uni-textarea" style="width: 100%;background-color:antiquewhite;font-size: 12px;"
					v-model="label"></textarea>
			</uni-section>
		</view>
		<view style="display: flex; flex-direction: row;">
			<button size="mini" style="width: 40%; " type="primary" @click="play">阅读</button>
			<button size="mini" style="width: 40%; " type="primary" @click="pause">暂停</button>
		</view>
		
		<view>
			<uni-section title="设置声音" type="line">
				<view class="setting-item">
					<text>风格：</text>
					<uni-data-select v-model="voicetype" :localdata="voicerange" @change="voicetypeChanged">
					</uni-data-select>
		
				</view>
				<view class="setting-item">
					<text>语速：</text>
					<uni-number-box :min="0" :max="15" v-model="spd" />
					<text>语调：</text>
					<uni-number-box :min="0" :max="15" v-model="pit" />
				</view>
			</uni-section>
		</view>
		<!-- <view v-show="showAudioInfo" style="display: flex; flex-direction: column;">
			<text>
				时长：{{duration}}秒
			</text>
			<text>
				当前播放：{{currentTime}}秒
			</text>
		</view> -->


	</view>

</template>

<script>
	export default {
		data() {
			return {
				showCamera: true,
				cameraCtx: null,
				audioCtx: null,
				showAudioInfo: false,
				src: null,
				label: '',
				duration: 0,
				currentTime: 0,
				voicetype: 0,
				spd: 5,
				pit: 5, //音调
				voicerange: [{
						value: 1,
						text: "度小宇"
					},
					{
						value: 0,
						text: "度小美"
					},
					{
						value: 3,
						text: "度逍遥（基础）"
					},
					{
						value: 4,
						text: "度丫丫"
					},
					{
						value: 5003,
						text: "度逍遥（精品）"
					},
					{
						value: 5118,
						text: "度小鹿"
					},
					{
						value: 106,
						text: "度博文"
					},
					{
						value: 110,
						text: "度小童"
					},
					{
						value: 111,
						text: "度小萌"
					},
					{
						value: 103,
						text: "度米朵"
					},
					{
						value: 5,
						text: "度小娇"
					},
				],
			}
		},
		methods: {
			voicetypeChanged() {
				
			},
			chooseImg() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(res.tempFilePaths[0]);
						this.src = res.tempFilePaths[0];

					}
				});
			},takePhoto1() {
				this.showCamera = true;
			},
			takePhoto() {
				if (this.cameraCtx == null)
					this.cameraCtx = uni.createCameraContext();
				this.cameraCtx.takePhoto({
					quality: 'high',
					success: (res) => {
						this.src = res.tempImagePath
						this.showCamera = false;
					}
				});
			},
			initdone(e) {
				console.log('initdone', e);
			},
			error(e) {
				console.log('error', e);
			},
			uploadImage() {
				if (this.src == null) return;
				uni.uploadFile({
					url: 'http://3454f485l2.yicp.fun/ocr/baidu/getContent',
					filePath: this.src,
					name: 'file',
					success: (res) => {
						console.log('上传成功', res)
						var data = JSON.parse(res.data);
						//data = eval('(' + res.data + ')');
						if (data.code != 0) {
							this.label = "识别失败"
						} else {
							this.src = null;
							this.label = data.data;
							this.showCamera = true;
						}
					},
					fail: (err) => {
						console.log('上传失败', err)
					}
				})
			},
			play() {
				uni.request({
					url: 'http://3454f485l2.yicp.fun/ocr/baidu/getVoice', //仅为示例，并非真实接口地址。
					data: {
						text: this.label,
						per: this.voicetype,
						spd: this.spd,
						pit: this.pit,
					},
					success: (res) => {
						console.log(res);
						var data = res.data
						console.log(data);
						console.log(data.data);
						if (data.code == 0) {
							this.player(data.data);
						}
					}
				});
			},
			pause() {
				if (this.audioCtx != null) {
					this.audioCtx.pause();
				}
			},
			player(url) {
				if (this.audioCtx == null) {
					this.audioCtx = uni.createInnerAudioContext();
					this.audioCtx.autoplay = false;

					this.audioCtx.obeyMuteSwitch = false;
					this.audioCtx.onPlay(() => {
						console.log('开始播放', url);
						//this.showAudioInfo = true;
					});
					this.audioCtx.onError((res) => {
						console.log(res.errMsg);
						console.log(res.errCode);
					});
					this.audioCtx.onCanplay((res) => {
						this.duration = parseInt(this.audioCtx.duration);
					});
					this.audioCtx.onTimeUpdate((res) => {
						this.currentTime = parseInt(this.audioCtx.currentTime);
					});
				}
				this.audioCtx.src = url;
				this.audioCtx.play();

			}
		}
	}
</script>

<style>
	.app {
		padding: 1%;
	}

	.camera {
		margin-bottom: 1%;
		height: 300px;
	}

	.review {
		margin-bottom: 1%;
		height: 300px;
		width: 99.5%;
		background-color: lightblue;
	}

	.setting-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-bottom: 5px;
	}
</style>
